<%--
  Created by IntelliJ IDEA.
  User: zhangDongFei
  Date: 2020/11/12
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <style type="text/css">
        .layui-table-cell{
            height:70px;
            line-height: 70px;
        }
        .layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
            width: 20px;
            height: 20px;
            margin-top:10px;
        }
    </style>
</head>
<body>
<div class="layui-elem-field">
    <form class="layui-form layui-form-pane" id="searchNewsFrom">
        <div class="layui-row">
            <div class="layui-inline">
                <label class="layui-form-label">房间类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" class="layui-input" placeholder="房间类型">
                </div>
                <button type="button" data-type="reload"
                        class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search"
                        lay-submit lay-filter="searchBtn">搜索
                </button>
            </div>
        </div>
    </form>
</div>


<%-----------------------------------------添加部门弹出框-----------------------------------------%>
<div id="addDeptForm">
    <form class="layui-form" action="">
        <div class="layui-form-item" style="padding-top: 5px">
            <label class="layui-form-label">房间名称</label>
            <div class="layui-input-inline" style="padding-top: 5px">
                <input type="text"  name="name" required  lay-verify="required" placeholder="请输入房间名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="padding-top: 5px">房间押金</label>
            <div class="layui-input-inline" style="padding-top: 5px">
                <input type="text"  name="yj" required  lay-verify="required" placeholder="请输入房间押金" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label" style="padding-top: 5px;padding-bottom:5px">房间价格</label>
            <div class="layui-input-inline" style="padding-top: 5px;padding-bottom:5px">
                <input type="text"  name="money" required  lay-verify="required" placeholder="请输入房间价格" autocomplete="off" class="layui-input">
            </div>
            <%--=================================添加房间类型   上传图片 ============================--%>
            <input type="hidden" name="imgpath" id="avatar" >
            <div class="layui-upload" style="padding-left:100px ; padding-top: 20px">
                <div class="layui-upload-list">
                    <img class="layui-upload-img"  id="demo1" style="width: 100px;height: 80px">
                    <p id="demoText"></p>
                </div>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
            </div>

        </div>

        <div class="layui-form-item"  style="padding-left:50px">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo" >立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>





<div id="updDeptForm" style="padding-top: 5px">
    <form class="layui-form" action="" lay-filter="modify">
        <div class="layui-form-item"  style="padding-top: 5px; display: none">
            <label class="layui-form-label">id</label>
            <div class="layui-input-inline">
                <input type="text"  name="id" required  lay-verify="required" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item"  style="padding-top: 5px">
            <label class="layui-form-label">房间名称</label>
            <div class="layui-input-inline">
                <input type="text"  name="name" required disabled  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"  style="padding-top: 5px">
            <label class="layui-form-label">房间押金</label>
            <div class="layui-input-inline">
                <input type="text"  name="yj" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item"  style="padding-top: 5px">
            <label class="layui-form-label">房间价格</label>
            <div class="layui-input-inline">
                <input type="text"  name="money" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="padding-left:100px">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo" >立即提交</button>
            </div>
        </div>
    </form>
</div>

<%--==========================================房间设施管理 弹窗==================================================--%>

<div id="typeMess">
    <form class="layui-form" action="" lay-filter="typeDetail" style="padding: 50px">
        <input type="hidden" name="typeid"/>
        <div class="layui-form-item">
            <label disabled class="layui-form-label">类型名字</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入名字" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间设施</label>
            <div id="sheshi">
                <%--展示所有的固定设施--%>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="index" lay-filter="index">修改</button>

            </div>
        </div>

    </form>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <%--当房间的数量大于0 的时候是不能删除的  等于0可以删除--%>
    {{# if(d.a==0){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
    {{# if(d.a>0){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" >删除</a>
    {{# } }}
    <a class="layui-btn layui-btn-xs" lay-event="detail" >设施管理</a>
</script>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script>
    layui.use(['table','layer','form','jquery', 'layedit', 'laydate','upload'], function(){
        var upload = layui.upload;
        var table = layui.table;
        var layer=layui.layer;
        var $=layui.jquery;
        var form=layui.form;
        var condition = "";
        $("#addDeptForm").hide();
        $("#updDeptForm").hide();
        $("#typeMess").hide();
        $(function () {
            showTable();
        })
        function showTable(){
            table.render({
                elem: '#test' //id为test的table
                ,url:'${pageContext.request.contextPath}/type?method=showTable'   //url 查询数据   所有的客户的数据
                ,limit:3
                ,limits:[3,6,10]
                ,request:{
                    pageName:'curr'
                    ,limitName:'nums'
                }
                ,where:{condition: condition}
                ,url: '${pageContext.request.contextPath}/type?method=showTable'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '房间表'
                //data[{ id:12,name:123}]
                ,cols: [[
                    {field:'id', title:'ID',fixed: 'left',  sort: true}
                    ,{field:'name', title:'房间名称'}
                    ,{field:'yj', title:'房间押金'}
                    ,{field:'money', title:'房间价格', sort: true}
                    , {
                        field: 'imgpath', title: '房间图片'
                        , templet: function (res) {
                            return '<img src="' + res.imgpath + '">'
                        }
                    }
                    ,{field:'a', title:'房间数量', sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
                ]]
                ,page: true
            });
        }



        //查询的提交事件
        form.on('submit(searchBtn)', function (data) {
            condition="";
            if(data.field.name!=null && data.field.name!=="" ){
                condition += " and name like '%"+data.field.name+"%' ";
            }
            showTable()
            return false;
        });
        //监听行工具事件  test  表格的id
        table.on('tool(test)', function(obj){
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    // obj.del();//页面删除
                    window.location.href="${pageContext.request.contextPath}/type?method=del&gid="+data.id;
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                form.val("modify",data);
                layer.open({
                    title: '修改信息'
                    ,type:1
                    ,area: ['400px', '400px']
                    ,offset: '50px'
                    ,content:$("#updDeptForm")
                    ,moveOut:true
                });
                form.on('submit(formDemo)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    //1.将获取到到的数据保存到数据库
                    $.ajax({
                        url:"${pageContext.request.contextPath}/type?method=add",
                        data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                        type:"post",

                        success:function(r){

                                layer.closeAll();
                                //刷新一下table
                                table.reload('test',{
                                    page:{
                                        curr:1
                                    }
                                })


                        },error:function(msg){
                            alert("服务器错误")
                        }

                    })

                    return false;
                });

                /* layer.prompt({
                     formType: 2
                     ,value: data.email
                 }, function(value, index){
                     obj.update({
                         email: value
                     });
                     layer.close(index);
                 });*/
            }
            else if(obj.event==='detail'){
                //详情  打开弹出层显示里面的配置信息  有的就勾选上 没有的就不选
                //$('#typeMess').show();
                $("#sheshi").empty();
                form.render();  //渲染  刷新表单
                layer.open({
                    type: 1, //这里content是一个普通的String
                    area: ['700px', '400px'],
                    offset:'100px',
                    anim:3,
                    content:$('#typeMess')
                    // content: '传入任意的文本或html',
                });
                //将数据填充到表格里面
                data["typeid"]=data.id;
                form.val("typeDetail",data);
                //form.val("typeDetail",{"typeid":data.id});
                // 查询所有的固定设施 以及这个类型的房间的设施
                getAllSheShi(data.id);
                //点击弹出框修改按钮的时候
                form.on('submit(index)', function(data){
                    var arr = new Array();
                    $("input:checkbox[name='ssid']:checked").each(function(i){
                        arr.push($(this).val());
                    });
                    data.field.ssid=arr.join(",");
                    // alert(JSON.stringify(data.field));
                    $.ajax({
                        url:"${pageContext.request.contextPath}/sheshi/addTypeSheshi",
                        data:data.field,
                        where:{typeid:data.id},
                        async:false,
                        success:function(r){
                            layer.closeAll();
                            if(r>0){
                                //刷新table
                                table.reload("test",{
                                    page:{
                                        //从第一页开始加载
                                        curr:1
                                    }
                                })
                                //刷新table
                                // layer.msg("添加成功！！！");
                                // layer.closeAll();
                                //
                                //   return false;
                            }
                        }
                    });
                    // return false;
                    //将原来的设施 删除 添加新的设施
                });
            }
        });
        var getAllSheShi=function(typeid){
            $.ajax({
                url:"${pageContext.request.contextPath}/sheshi/getAll",
                data:{typeid:typeid},
                dataType:'json',
                success:function(r){
                    // alert(JSON.stringify(r));
                    //所有的设施是 allSheshi ownsheshi
                    var all=r.allSheshi;
                    for(var i=0;i<all.length;i++){
                        var inp="   <input type='checkbox' name='ssid' value='"+all[i].ssId+"'>"+all[i].ssName;
                        $("#sheshi").append(inp);
                    }
                    //alert($("#sheshi").html());
                    //将所有的这个类型所拥有的设施 选中
                    var checkData=r.ownsheshi;
                    if(checkData.length>0) {
                        for (var i = 0; i < checkData.length; i++) {
                            $("input[value='" + checkData[i].ssid + "']").prop("checked", true);
                        }
                    }
                    form.render();
                }
            });
        }




        /*88888888888888888****-----------添加房间类型的  上传图片--------*/
        var img="";
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '${pageContext.request.contextPath}/sheshi/upl' //上传接口
            ,done: function(res){
                //   alert("res"+res);
                //    alert("res.data"+res.data);
                //上传完毕回调
                //如果上传失败
                if(res.code == 0){
                    var src=res.data;
                    $("#avatar").val(src);
                    $('#demo1').attr('src',src );// attr(属性名, 属性值)  设置属性的值
                    //     alert(src);
                    img=src;
                    // $('#demo1').attr('src',src );

                }else
                {
                    return layer.msg('上传失败');
                }
            }
            ,error: function(){
                //请求异常回调
                alert("请求异常回调")
            }
        });




        //头工具栏事件
            table.on('toolbar(test)', function(obj){
                layer.open({
                    title: '添加房间信息'
                    ,type:1
                    ,area: ['350px', '400px']
                    ,offset: '50px'
                    ,content:$("#addDeptForm")
                    ,moveOut:true
                });
                form.on('submit(formDemo)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    //1.将获取到到的数据保存到数据库
                    $.ajax({
                        url:"${pageContext.request.contextPath}/type?method=add",
                        data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                        type:"post",
                        success:function(r){
                             layer.closeAll();
                            //刷新一下table
                            //      alert("data.field"+data.field);
                            table.reload('test',{
                                page:{
                                    curr:1
                                }
                            })
                        },error:function(msg){
                            alert("服务器错误")
                        }

                    })
                    return false;
                });
            });

    });

</script>
</body>
</html>